<template>
  <BasicModal ref="showActionModal" :detilaTitle="props.title" width="1000px" @emit-callback-fn="modalCallbackFn">
    <template #content>
      <NavTitle title="基本信息" class="nav-title-bottom" showRightIcon />
      <div class="basic-info-content">
        <div class="basic-info-info" v-for="(item, index) in baseList" :key="index">
          <div class="basic-info-name">{{ item.name }}</div>
          <div class="basic-info-description">
            <template v-if="item.value === 'status'">
              {{ podStatusMap[item.description as PodStatus]?.text || '--' }}
            </template>
            <template v-else>{{ item.description }}</template>
          </div>
        </div>
      </div>
      <NavTitle title="容器组信息" class="nav-title-bottom" showRightIcon />
      <Table ref="tableRef" :columns="columns" :data="loadData" :alert="false" bordered :showPagination="false" />
    </template>
  </BasicModal>
</template>

<script setup lang="ts">
import { podStatusMap } from '@/settings/commonSettings';
import { PodStatus } from '@/enums/pipelineEnum';
const props = defineProps({
  title: {
    type: String,
    default: '详情',
  },
});

const showActionModal = ref<any>(null);
const baseList = ref([
  {
    name: 'node',
    description: '',
    value: 'nodeName',
  },
  {
    name: '状态',
    description: '',
    value: 'status',
  },
  {
    name: '容器组ip',
    description: '',
    value: 'ip',
  },
  {
    name: 'pod信息',
    description: '',
    value: 'podName',
  },
  {
    name: '就绪状态',
    description: '',
    value: 'ready',
  },
  {
    name: '创建时间',
    description: '',
    value: 'createTime',
  },
]);

const columns = [
  { dataIndex: 'name', title: '容器名', align: 'center', ellipsis: true, width: 180 },
  { dataIndex: 'id', title: '容器ID', align: 'center' },
  { dataIndex: 'image', title: '镜像', align: 'center' },
];
const currentRow = ref<any>({});
const loadData = async () => {
  const data = currentRow.value?.dockerDTOList || [];
  return data;
};
const modalCallbackFn = () => {
  showActionModal.value.hideModal();
};

const onOpen = (obj: any) => {
  currentRow.value = obj;
  baseList.value = baseList.value.map((item) => {
    item.description = currentRow.value?.[item.value];
    return item;
  });
  showActionModal.value.showModal(obj, '关闭');
};

defineExpose({
  onOpen,
});
</script>

<style lang="less" scoped>
.nav-title-bottom {
  margin-bottom: 20px;
}
.basic-info-content {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ecf3fb;
  border-right: 1px solid #ecf3fb;
  border-radius: 4px;

  .basic-info-info {
    display: flex;
    width: 33.333333%;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid #ecf3fb;
    &:nth-child(odd) {
    }

    .basic-info-name {
      min-width: 120px;
      flex: 3;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 16px;
      background: #f9faf9;
      box-shadow: 1px 0px 0px 0px rgba(236, 243, 251, 1);
      border-radius: 4px 0px 0px 0px;
      font-size: 14px;
      color: #666666;
      font-weight: 400;
      border-left: 1px solid #ecf3fb;
    }
    .basic-info-description {
      flex: 7;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      padding: 16px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.8);
      letter-spacing: 0;
      font-weight: 400;
    }
  }
}
</style>
